<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>梦幻新诛仙-模拟器</title>
      <!-- 引入样式 -->
      <link rel="stylesheet" href="css/reset.css">
      <link rel="stylesheet" href="css/index.css">
      <link rel="stylesheet" href="layer/mobile/need/layer.css">
      <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
   </head>
   <body>
      <div id="app" class="hide">
         <el-container>
            <el-header>
               <div class="header" v-cloak>
                  <div >
                     <span >
                        {{title}}--{{versions}}
                     </span>
                     <span class="header_text">(版本更新后，请删除版本号不对应的宠物,重新添加。)</span>
                  </div>
               </div>
            </el-header>
            <el-main>
               <div class="cont">
                  <div class="cont_title">我的宠物列表</div>
                  <div class="cont_btn">
                     <el-button type="primary" size="small" @click="addPet">添加宠物</el-button>
                  </div>
               </div>
               <template>
                  <el-table :data="tableData" style="width: 100%">
                     <el-table-column prop="name" label="名称" width="180"></el-table-column>
                     <el-table-column prop="image" label="图鉴" width="180">
                        <template slot-scope="scope">
                           <img :src="scope.row.image" alt="灵兽图片" class="pet_img">
                        </template>
                     </el-table-column>
                     <el-table-column prop="grade" label="等级" width="180"></el-table-column>
                     <el-table-column prop="variation" label="变异" :formatter="formatter" width="180"></el-table-column>
                     <el-table-column prop="skill" label="技能数量" width="180"></el-table-column>
                     <el-table-column prop="rename" label="重命名"></el-table-column>
                     <el-table-column prop="versions" label="版本号"></el-table-column>
                     <el-table-column fixed="right" label="操作" width="200">
                        <template slot-scope="scope">
                           <el-button @click.native.prevent="modifyRow(scope.$index, tableData)" type="text"
                              size="small">
                              修改
                           </el-button>
                           <el-button @click.native.prevent="testRow(scope.$index, tableData)" type="text" size="small">
                              测试伤害
                           </el-button>
                           <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text"
                              size="small">
                              删除
                           </el-button>
                        </template>
                     </el-table-column>
                  </el-table>
               </template>
            </el-main>
         </el-container>
      </div>
      <script type="text/javascript" src="//js.users.51.la/21357917.js"></script>
   </body>
   <!-- 引入组件库 -->
   <script src="js/vue.min.js"></script>
   <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
   <script src="layer/layer.js"></script>
   <script src="https://unpkg.com/element-ui/lib/index.js"></script>
   <script src="js/pets.json" type="text/javascript" charset="utf-8"></script>
   <script>
      var app = new Vue({
         el: "#app",
         data: {
            title: '梦幻新诛仙宠物模拟器',
            pets: pets,
            tableData: [],
            loading: true,
            versions:'v4.0.0'
         },
         created() {
            this.tableData = localStorage.getItem('tableData') ? JSON.parse(localStorage.getItem('tableData')) :
            [];
         },
         methods: {
            deleteRow(index, rows) {
               this.$confirm('是否删除已添加的宠物?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
               }).then(() => {
                  this.$message({
                     type: 'success',
                     message: '删除成功!'
                  });
                  this.tableData.splice(index, 1);
                  localStorage.setItem('tableData', JSON.stringify(this.tableData));
               }).catch(() => {
                  this.$message({
                     type: 'info',
                     message: '已取消删除'
                  });
               });
            },
            addPet() {
               console.log('添加宠物');
               layer.open({
                  type: 2,
                  title: '添加宠物',
                  maxmin: true,
                  shadeClose: false, //点击遮罩关闭层
                  area: ['1200px', '680px'],
                  content: './view/addpet.html?versions=' + this.versions
               });
            },
            modifyRow(index, rows) {
               console.log('修改');
               layer.open({
                  type: 2,
                  title: '修改属性',
                  maxmin: true,
                  shadeClose: false, //点击遮罩关闭层
                  area: ['1200px', '680px'],
                  content: './view/modify.html?index=' + index
               });
            },
            testRow(index, rows) {
               layer.open({
                  type: 2,
                  title: '伤害测试',
                  maxmin: true,
                  shadeClose: false, //点击遮罩关闭层
                  area: ['1200px', '680px'],
                  content: './view/hurttest.html?index=' + index
               });
            },
            formatter(row, column) {
               return row.variation == 1 ? "是" : "否";
            }
         },
         mounted() {
            this.loading = false;
            document.querySelector('#app').classList.remove('hide');
            // layer.open({
            //   type: 2,
            //   title: '伤害测试',
            //   maxmin: true,
            //   shadeClose: false, //点击遮罩关闭层
            //   area : ['1200px' , '680px'],
            //   content: './view/hurttest.html?index=0'
            // });
            // layer.open({
            //   type: 2,
            //   title: '修改属性',
            //   maxmin: true,
            //   shadeClose: false, //点击遮罩关闭层
            //   area : ['1200px' , '680px'],
            //   content: './view/modify.html?index=0'
            // });
         }
      })
   </script>
</html>
